<template>
	<AdaptiveNavBar title="商家入口" :showBack="true" :showHome="false" backgroundColor="#ffffff" textColor="#333333" />
	<view class="content-area" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
		<view class="container">
			<!-- 顶部标题栏 -->

			<!-- 未注册状态 -->
			<view v-if="!isRegistered" class="unregistered">
				<view class="options-container">

					<view class="main-card">
						<view class="card-header">
							<view class="platform-icon">
								<image src="../../../static/logo.png" alt="平台图标" class="image"></image>
							</view>
							<view class="platform-info">
								<view class="oinfo flex-row-between" style="width: 100%;">
									<view class="platform-title">纤程旅行</view>
									<view class="platform-url">abc.qctrips.cn</view>
								</view>
								<view class="pinfo">
									<view class="platform-desc">研学旅游与泛营地教育行业协作平台</view>
								</view>
							</view>
						</view>
						<view class="action-section">
							<view class="action-buttons">
								<view class="action-btn" @click="goToLearnMore" style="background: #FBBD08;">连接</view>
								<view class="action-btn" @click="goToLearnMore" style="background: #39B54A;">协同</view>
								<view class="action-btn" @click="goToLearnMore" style="background: #0081FF;">赋能</view>
								<view class="action-btn" @click="goToRegister" style="background: #F37B1D;">交易</view>
							</view>
							<view class="details-link flex-row-start" @click="goToLearnMore">
								详情
								<u-icon name="arrow-right" color="#666666" size="13"></u-icon>
							</view>
						</view>
					</view>
					<view class="process-card" @click="goToRegister">
						<view class="process-icon flex-column-center">
							<u-icon name="home" size="40" color="#666"></u-icon>
							<text class="shop">开设店铺</text>
						</view>
						<view class="process-content">
							<view class="process-title">从开设店铺到完成交易</view>
							<view class="process-steps">
								<view class="step-row">
									<text class="step-item">上架商品</text>
									<text class="step-item">连接渠道</text>
									<text class="step-item">产业协同</text>
									<!-- <text class="step-item">开设店铺</text> -->
									<text class="step-item">全面赋能</text>
								</view>
								<view class="step-row">
									<text class="step-item">安全高效完成交易</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 转发按钮 -->
					<button class="action-button primary" open-type="share">转发</button>
				</view>
			</view>
			<!-- 已注册状态 -->
			<view v-else class="registered">

				<view class="merchant-card">
					<view class="merchant-info">
						<image v-if="logo" :src="logo" alt="商家logo" class="merchant-logo"></image>
						<image v-else src="../../../static/logo.png" alt="商家logo" class="merchant-logo"></image>
						<view>
							<view class="merchant-details">
								<text class="company-name">{{ merchantItem.shopName || '' }}</text>
								<text class="branch-name u-m-l-10 color-999">({{ merchantItem.branchName || '分店名称'
								}})</text>
							</view>
							<view class="flex-row-start">
								<view class="merchant-tag" :style="getBusinessTypeStyles(companyInfo.businessType)">
									纤程旗舰
								</view>
								<view class="service-count u-m-l-20 color-999">累计服务2314人</view>
							</view>
						</view>
					</view>
				</view>

				<view class="merchant-card font-weight">
					<view class="flex-row-between" style="width: 100%;">
						<text class="contact-label" style="margin-right: 20rpx;">管理员</text>
						<view class="merchant-contact">
							<text class="contact-name" style="margin-right: 20rpx;">{{ companyInfo.authPerson || ''
							}}</text>
							<text class="contact-phone" style="margin-right: 20rpx;">{{ (companyInfo.phone ||
								'').replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') || ''
							}}</text>
						</view>
						<view class="action-button-login" v-if="companyInfo.status === 1" @click="goToManage"
							:style="getBusinessTypeStyles(companyInfo.businessType)">登录
						</view>
						<view class="action-button failure" v-if="companyInfo.status === 0" @click="goToToast">登录</view>
					</view>
				</view>
			</view>

			<view class="copyright">
				Copyright @ 2025<br>
				豫B2-20231237
			</view>
		</view>
	</view>
</template>
<script>
import {
	request
} from '@/utils/request.js';
import { useUserStore } from '@/store';

export default {
	data() {
		return {
			//是否注册
			isRegistered: false,
			companyInfo: {},
			merchantMedia: {},
			logo: '',
			merchantItem: {}
		};
	},
	computed: {
		hasLogo() {
			return typeof this.logo === 'string' && this.logo.trim() !== '';
		}
	},
	async onLoad() {
		console.log('merchantLogin页面加载');
		// 获取商家信息
		await this.getMerchantInfo();
		await this.getMerchantItem();
		await this.getMerchantMedia();
	},
	onShareAppMessage(res) {
		// 自定义转发内容
		if (res.from === 'button') {
			// 来自页面内转发按钮
			console.log(res.target);
		}

		return {
			title: '纤程旅行平台',
			path: '/public/login/merchantLogin/index',
			imageUrl: '../../../static/logo.png', // 可以设置自定义图片
			success(res) {
				uni.showToast({
					title: '转发成功',
					icon: 'success'
				});
			},
			fail(res) {
				uni.showToast({
					title: '转发失败',
					icon: 'none'
				});
			}
		};
	},
	methods: {
		// 获取商家类型文本
		getBusinessTypeText(type) {
			const typeMap = {
				1: '景区',
				2: '旅行社',
				3: '教培'
			};
			return typeMap[type] || '';
		},

		// 获取商家类型对应的背景色
		getBusinessTypeColor(type) {
			const colorMap = {
				1: '#0081FF',  // 蓝色
				2: '#39B54A',  // 绿色
				3: '#FBBD08'   // 黄色
			};
			return colorMap[type] || '#39B54A'; // 默认绿色
		},
		hexToRgba(hex, alpha) {
			let h = hex.replace('#', '')
			if (h.length === 3) {
				h = h.split('').map(c => c + c).join('')
			}
			const r = parseInt(h.substring(0, 2), 16)
			const g = parseInt(h.substring(2, 4), 16)
			const b = parseInt(h.substring(4, 6), 16)
			return `rgba(${r}, ${g}, ${b}, ${alpha})`
		},
		getBusinessTypeStyles(type) {
			const color = this.getBusinessTypeColor(type)
			return {
				color,
				backgroundColor: this.hexToRgba(color, 0.1)
			}
		},

		//获取商家信息
		async getMerchantInfo() {
			this.loading = true
			try {
				const res = await request({
					url: `/merchant/query`,
					method: 'GET'
				})

				if (res.code === 200) {
					this.companyInfo = res.data
					console.log('商家信息:', this.companyInfo)
					// 处理图片数据
					if (this.companyInfo === null || this.companyInfo.id === null) {
						// 未注册状态，不显示弹窗，直接显示未注册界面
						this.isRegistered = false
						return
					}
					//处理商家状态
					if (this.companyInfo.status === 0) {
						uni.showToast({
							title: '您的商家状态正在审核，请耐心等待',
							icon: 'none',
							duration: 3000
						});

						// 延迟跳转，确保提示信息能够显示
						// setTimeout(() => {
						//   uni.reLaunch({
						//     url: '/pages/customer/mine/index'
						//   });
						// }, 3000);
					}
					if (this.companyInfo.status === 2) {
						this.isRegistered = false
						uni.showToast({
							title: '您的商家信息审核未通过，请您半小时后重新提交',
							icon: 'none',
							duration: 3000
						});
						// setTimeout(() => {
						//   uni.reLaunch({
						//     url: '/pages/customer/mine/index'
						//   });
						// }, 3000);
					}
					if (this.companyInfo.status === 3) {
						this.isRegistered = false

						uni.showToast({
							title: '您的商家状态已被禁用，请联系客服处理',
							icon: 'none',
							duration: 3000
						});

						// setTimeout(() => {
						//   uni.reLaunch({
						//     url: '/pages/customer/mine/index'
						//   });
						// }, 3000);
					}
					this.companyInfo.openid = '' // 清除敏感信息
					// 存储到本地
					uni.setStorageSync('companyInfo', this.companyInfo)
					// 已注册
					this.isRegistered = true
				}
			} catch (error) {
				console.error('获取商家信息失败:', error)
				// 网络错误时也显示未注册状态
				this.isRegistered = false
			} finally {
				this.loading = false
			}
		},
		async getMerchantItem() {
			const res = await request({
				url: `/merchant-item/getByMerchantId?merchantId=${this.companyInfo.id}`,
				method: 'GET',
				loading: true
			});
			this.merchantItem = res.data || {};
			console.log('商户基本信息', this.merchantItem);
		},
		async getMerchantMedia() {
			const res = await request({
				url: `/merchantMedia/${this.companyInfo.id}`,
				method: 'GET',
				loading: true
			});
			this.merchantMedia = res.data || {};
			console.log('商户媒体信息', this.merchantMedia);
			const logoList = Array.isArray(this.merchantMedia.logoUrls) ? this.merchantMedia.logoUrls : [];
			const foundLogo = logoList.find(item => item && item.url);
			this.logo = foundLogo ? foundLogo.url : '';
			console.log('商户logo', this.logo);
		},
		goToRegister() {
			// 商家注册页面
			uni.navigateTo({
				url: '/public/merchantRegister/merchantRegister'
			});
		},
		goToLearnMore() {
			uni.navigateTo({
				url: '/public/learnMore/index'
			});
		},
		goToManage() {
			// 设置用户角色为商家
			try {
				const userStore = useUserStore();
				if (userStore) {
					userStore.setRole('merchant');
					console.log('用户角色已设置为商家');
				}
			} catch (error) {
				console.error('设置商家角色失败:', error);
			}

			// 跳转到商家端首页
			uni.reLaunch({
				url: '/pages/merchant/index/index'
			});
		},
		goToToast() {
			uni.showToast({
				title: '您的商家信息正在审核中，请耐心等待',
				icon: 'none',
				duration: 3000
			});
		},
		goBack() {
			// 返回上一页
			uni.navigateBack();
		},
		// 创建新店铺
		createFn() {
			uni.navigateTo({
				url: '/public/merchantRegister/merchantRegister'
			})
		}
	}
};
</script>

<style scoped lang="scss">
.content-area {}

.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

/* 顶部标题栏 */
.header {
	background: linear-gradient(135deg, #ff7b39 0%, #ff9f5a 100%);
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.back-btn {
	display: flex;
	align-items: center;
}

.back-text {
	color: #fff;
	font-size: 28rpx;
	margin-left: 8rpx;
}

.header-title {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

/* 未注册状态 */
.unregistered {
	flex: 1;
	padding: 40rpx 30rpx;
}

/* 主卡片样式 */
.main-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-header {
	display: flex;
	margin: 0 auto;
	justify-content: flex-start;
	/* 垂直居中 */
	/* 水平靠左排列 */
}

.platform-info {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.platform-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.platform-url {
	font-size: 28rpx;
	color: #666;
	margin-right: 40rpx;
}

.platform-icon {
	width: 100rpx;
	flex-shrink: 0;
	margin-right: 20rpx;
}

.platform-desc {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 30rpx;
	line-height: 1.5;
}

.action-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
	flex: 1;
}

.image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
}

.shop {
	color: #82a0f7;
	font-size: 24rpx;
}

.action-btn {
	flex: 1;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #3fbda3;
	color: #fff;
	font-size: 26rpx;
	border-radius: 8rpx;
	font-weight: 500;
}

.action-btn:active {
	opacity: 0.8;
}

.details-link {
	font-size: 26rpx;
	color: #666;
	margin-left: 20rpx;
	padding: 5rpx;


	display: flex;
}

.arrow {
	margin-left: 4rpx;
}

/* 流程描述卡片样式 */
.process-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: flex-start;
}

.process-card:active {
	border: #3fbda3 2rpx solid;
}

.oinfo {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.process-icon {
	margin-right: 40rpx;
	margin-top: 8rpx;
}

.process-content {
	flex: 1;
}

.process-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 40rpx;
}

.process-steps {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.step-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.step-item {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

/* 已注册状态 */
.registered {
	flex: 1;
	padding: 40rpx 30rpx;
}

.status-header {
	text-align: center;
	margin-bottom: 40rpx;
}

.status-title {
	display: block;
	color: #333;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.status-subtitle {
	display: block;
	color: #666;
	font-size: 28rpx;
}

.merchant-card {
	background: #fff;
	border-radius: 20rpx;
	display: flex;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

	.action-button {
		margin: 0;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 10rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	&.font-weight {
		padding: 20rpx 30rpx;
	}
}

.merchant-info {
	display: flex;
	align-items: center;
}

.merchant-logo {
	width: 140rpx;
	height: 140rpx;
	border-radius: 10%;
	margin-right: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f0f0f0;
}

.merchant-logo__image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.merchant-details {
	font-size: 36rpx;
	color: #333;
	margin-bottom: 24rpx;
	display: flex;
	justify-content: start;
	align-items: center;
}

.company-name {
	display: block;
	color: #333;
	font-size: 40rpx;
	font-weight: bold;
}

.branch-name {
	font-size: 28rpx;
}

.company-code {
	display: block;
	color: #666;
	font-size: 26rpx;
}

.service-count {
	font-size: 28rpx;
}

.merchant-tag {
	border-radius: 10rpx;
	padding: 8rpx 20rpx;
	color: inherit;
	font-size: 28rpx;
	font-weight: bold;
}


.merchant-contact {
	text-align: left;
	display: flex;
	// justify-content: center;
	flex:1;
}

.contact-label {
	display: block;
	color: #333;
	font-size: 32rpx;
}

.contact-name {
	display: block;
	color: #333;
	font-size: 32rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.contact-phone {
	display: block;
	color: #666;
	font-size: 32rpx;
}

/* 操作按钮 */
.action-button {
	margin: 0 30rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 44rpx;
	margin-top: 30rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #fff;
}

.action-button-login {
	// margin: 0 30rpx;
	height: 60rpx;
	width: 160rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 14rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #fff;
}

.action-button.primary {
	background: #ECF8ED;
	color: #4caf50;
	margin: 40rpx 0 0;
	border-radius: 10rpx;
	font-size: 28rpx;
}

.action-button.success {
	margin-left: 60rpx;
	background: transparent;
}

.action-button.failure {
	margin-left: 60rpx;
	background: linear-gradient(135deg, #d1cfcb 0%, #c1c0bf 100%);
}

.action-button:active {
	opacity: 0.8;
	transform: scale(0.98);
}

.copyright {
	color: #ccc;
	position: fixed;
	bottom: 60rpx;
	width: 100vw;
	left: 0;
	text-align: center;
	font-size: 26rpx;
	line-height: 1.7;
}
</style>